import { EventNames, Props } from "src/types/shape";
import Base from "./Base";
import utils from "src/utils";
import videoFrame from "./VideoFrame";
import { idToRgba } from "src/utils/helper";
import ImageFrame from "./ImageFrame";

export default class extends Base {
  parent: videoFrame
  video: HTMLVideoElement
  duration: string = '0:00'
  playIcon!: ImageFrame
  volumeIcon!: ImageFrame
  fullScreenIcon!: ImageFrame
  downloadIcon!: ImageFrame
  playImage!: HTMLImageElement
  volumeImage!: HTMLImageElement
  fullScreenImage!: HTMLImageElement
  pauseImage!: HTMLImageElement
  muteImage!: HTMLImageElement
  downloadImage!: HTMLImageElement
  play: boolean = false
  volume: boolean = true
  readonly iconSize: number = 17
  constructor(option: Props, parent: videoFrame, video: HTMLVideoElement) {
    super()
    utils.object.Assign(option, this.props)
    this.parent = parent
    this.video = video
    this.props.size = 14
    this.props.text = this.toTime(this.video.currentTime) + this.toTime(this.video.duration)
    this.props.textColor = '#ffffff'

    this.video.addEventListener('durationchange', () => {
      this.duration = this.toTime(this.video.duration)
    })
    this.getResources()
    this.handleEvent()
  }
  getResources() {
    const { x, y } = this.props
    this.playImage = new Image()
    this.volumeImage = new Image()
    this.fullScreenImage = new Image()
    this.pauseImage = new Image()
    this.muteImage = new Image()
    this.downloadImage = new Image()

    this.playIcon = new ImageFrame(this.playImage, Object.assign(new Props(), {
      x,
      y,
      width: this.iconSize,
      height: this.iconSize
    }))
    this.downloadIcon = new ImageFrame(this.downloadImage, Object.assign(new Props(), {
      x: x + this.props.width - this.iconSize * 5,
      y,
      width: this.iconSize,
      height: this.iconSize
    }))
    this.volumeIcon = new ImageFrame(this.volumeImage, Object.assign(new Props(), {
      x: x + this.props.width - this.iconSize * 3,
      y,
      width: this.iconSize,
      height: this.iconSize
    }))
    this.fullScreenIcon = new ImageFrame(this.fullScreenImage, Object.assign(new Props(), {
      x: x + this.props.width - this.iconSize,
      y,
      width: this.iconSize,
      height: this.iconSize
    }))

    this.playImage.src = '../../svg/bofang.svg'
    this.volumeImage.src = '../../svg/yinliang.svg'
    this.fullScreenImage.src = '../../svg/quanping.svg'
    this.pauseImage.src = '../../svg/zanting.svg'
    this.muteImage.src = '../../svg/jingyin.svg'
    this.downloadImage.src = '../../svg/xiazai.svg'
  }
  handleEvent() {
    this.playIcon.on(EventNames.click, () => {
      this.play = !this.play
      this.playIcon.image = this.play ? this.playImage : this.pauseImage
      this.play ? this.video.play() : this.video.pause()
    })
    this.volumeIcon.on(EventNames.click, () => {
      this.volume = !this.volume
      this.volumeIcon.image = this.volume ? this.muteImage : this.volumeImage
      this.video.muted = this.volume
    })
    this.fullScreenIcon.on(EventNames.click, () => {
      this.video.requestFullscreen()
    })
    console.log(this.video.src);
    this.downloadIcon.on(EventNames.click, () => {
      const a = document.createElement('a')
      
      fetch(this.video.src)
        .then(res => res.blob())
        .then(blob => {
          a.href = window.URL.createObjectURL(blob);
          document.body.appendChild(a)
          a.click()
          a.download = '111'
          document.body.removeChild(a)
          window.URL.revokeObjectURL(a.href)
        })
    })
    this.playIcon.on(EventNames.mouseenter, () => {
      document.body.style.cursor = 'pointer'
    })
    this.playIcon.on(EventNames.mouseleave, () => {
      document.body.style.cursor = 'default'
    })
    this.volumeIcon.on(EventNames.mouseenter, () => {
      document.body.style.cursor = 'pointer'
    })
    this.volumeIcon.on(EventNames.mouseleave, () => {
      document.body.style.cursor = 'default'
    })
    this.fullScreenIcon.on(EventNames.mouseenter, () => {
      document.body.style.cursor = 'pointer'
    })
    this.fullScreenIcon.on(EventNames.mouseleave, () => {
      document.body.style.cursor = 'default'
    })
    this.downloadIcon.on(EventNames.mouseenter, () => {
      document.body.style.cursor = 'pointer'
    })
    this.downloadIcon.on(EventNames.mouseleave, () => {
      document.body.style.cursor = 'default'
    })
  }
  updateIcon() {
    this.volume = this.video.muted
    this.play = !!(this.video.currentTime > 0 && !this.video.paused && !this.video.ended && this.video.readyState > this.video.HAVE_FUTURE_DATA)

    this.playIcon.image = this.play ? this.playImage : this.pauseImage
    this.volumeIcon.image = this.volume ? this.muteImage : this.volumeImage
  }
  getFrame() {
    return [this.playIcon, this.volumeIcon, this.fullScreenIcon, this.downloadIcon]
  }
  toTime(seconds: number) {
    if (isNaN(seconds)) {
      return "0:00";
    }
    else {
      // @ts-ignore
      var minutes = parseInt(seconds / 60)
      // @ts-ignore
      seconds = parseInt(seconds - minutes * 60);
      if (seconds < 10) {
        return minutes + ":0" + seconds;
      }
      else {
        return minutes + ":" + seconds;
      }
    }
  }
  draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D): void {
    const { x, y, textColor, size, text } = this.props

    this.props.text = this.toTime(this.video.currentTime) + ' / ' + this.toTime(this.video.duration)
    this.updateIcon()

    ctx.save()
    ctx.beginPath()
    ctx.fillStyle = textColor
    ctx.font = `${size}px Arial`
    ctx.fillText(text, x + this.iconSize * 2, y + size, 100)
    ctx.closePath()

    this.playIcon.draw(ctx, osCtx)
    this.downloadIcon.draw(ctx, osCtx)
    this.volumeIcon.draw(ctx, osCtx)
    this.fullScreenIcon.draw(ctx, osCtx)

    ctx.restore()
  }
  drawMirror(osCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void {
    const { x, y, width, height } = this.props

    // 镜像画布
    const [r, g, b, a] = idToRgba(this.getRgbaId())

    osCtx.save()

    osCtx.beginPath()
    osCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`
    osCtx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${a})`
    osCtx.rect(x, y, width, height)
    osCtx.fill()
    osCtx.stroke()
    osCtx.closePath()
    this.playIcon.drawMirror(osCtx)
    this.downloadIcon.drawMirror(osCtx)
    this.volumeIcon.drawMirror(osCtx)
    this.fullScreenIcon.drawMirror(osCtx)

    osCtx.restore()
  }
}